<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="javascript/GameFramework/Framework.js"></script>
		<title></title>
		<script type="text/javascript">
			var canvas;
			var sprite;
			var map;
			//debug mode
			GF.debug(true);
			
			GF.load({
				classes: [
					"Runner:Runner",
					"Controller:ui.Controller",
					"Graphics:ui.g2d.Graphics",
					"ui.g2d.physics.Physics",
					"ui.g2d.Displayable",
					"Image:ui.g2d.Image",
					"Canvas:ui.g2d.Canvas",
					"Sprite:ui.g2d.Sprite",
					"Map:ui.g2d.Map",
					"Layer:ui.g2d.Layer"
				],
				complete: function () {
					loadImages(function () {
						init();
						regController();
						start();
					});
				}
			});
			
			var mapArr = [
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
				[4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]
			];
			
			function init() {
				canvas = new Canvas(document.getElementById("mainCanvas"), 960, 640);
				sprite = new Sprite(GF.getImage("towers"), 64, 64);
				map = new Map(GF.getImage("map"), mapArr, 64, 64, 960, 640);
			};
			
			function regController() {
				Controller.setTarget(canvas.getSource());
				Controller.addKey(87);
				Controller.addKey(83);
				Controller.addKey(65);
				Controller.addKey(68);
			};
			
			function action() {
				if(Controller.getState(87) != 0)
					sprite.prevFrame();
				if(Controller.getState(83) != 0)
					sprite.nextFrame();
				if(Controller.getState(65) != 0)
					GF.println("A");
				if(Controller.getState(68) != 0)
					GF.println("D");
				Controller.popMouseEvent("mousedown");
				Controller.cleanAllMouseEvent();
			};
			
			function loadImages(callback) {
				GF.saveImage("towers", "/images/towers.png");
				GF.saveImage("map", "/images/map.png");
				GF.loadAllImage(callback);
			};
			
			function draw() {
				canvas.getGraphics().getContext().clearRect(0, 0, 960, 640);
				map.draw(canvas.getGraphics());
			};
			
			function start() {
				new Runner(function () {
					draw();
					action();
				}, 16).start();
			};
		</script>
        <style type="text/css">
        	
        </style>
	</head>
    <body>
    	<center>
	    	<canvas id="mainCanvas">
	    		
	    	</canvas>
		</center>
    </body>
</html>
